<template>
    <div>
        <el-select v-model="props.deptId" :disabled="disabled" :placeholder="placeholder" clearable
            style="width: 100%;" @change="deptChange">
            <template #header>
                <div style="display: flex;">
                    <div class="font-css" style="flex: 2;min-width: 190px;">病区</div>
                    <div class="font-css" style="flex: 1;min-width: 120px;">总床位(张)</div>
                    <div class="mr40 font-css" style="flex: 1;min-width: 120px;">已用床位(张)</div>
                    <div class="font-css" style="flex: 1;min-width: 120px;">空床(张)</div>
                </div>

            </template>
            <!-- <el-option disabled  :value="11111">

            </el-option>  -->
            <el-option v-for="item in deptList" :key="item.wardCode" :label="item.wardCodeName" :value="item.wardCode">
                <div style="display: flex;">
                    <div class="font-css" style="flex: 2;">{{ item.wardCodeName }}</div>
                    <div class="font-css" style="flex: 1;margin-left: -40px;">{{ item.total }}</div>
                    <div class="mr40 font-css" style="flex: 1;margin-left: 20px;">{{ item.occupy }}</div>
                    <div class="font-css " style="flex: 1;">{{ item.noOccupy }}</div>
                </div>
            </el-option>
        </el-select>
    </div>
</template>

<script lang="ts" setup>

import {getDeptVsBedList} from '@/api/nurse/bedRec.ts'

const deptList = ref<any>([])
const orgId = ref("")
const emits = defineEmits(['deptChange'])
const { proxy } = getCurrentInstance() as any
const currentSelectDept = proxy.$currentSelectDept

const props = defineProps({
    placeholder: {
        type: String,
        default: "请选择科室"
    },
    // 科室属性
    deptAttributeStr: {
        type: String,
        default: ""
    },
    // 临床标识
    clinicalSignStr: {
        type: String,
        default: ""
    },
    // 门诊住院属性集合
    clinicVsVisitStr: {
        type: String,
        default: ""
    },
    //内、外科 其他科室
    internalOrSurgeryStr: {
        type: String,
        default: ""
    },
    // 机构id
    orgId: {
        type: String,
        default: ''
    },
    // 科室id
    deptId: {
        type: String,
        default: ''
    },
    disabled : {
        type: Boolean,
        default: false
    }
})
watch(() => props.orgId, (newValue, _oldValue) => {
    orgId.value = newValue
    if (orgId.value) {
        getDeptList()
    }
}, { deep: true, immediate: true })
// 获取科室集合
function getDeptList() {
    getDeptVsBedList(currentSelectDept, orgId.value).then(res => {
        deptList.value = res.data
    })
}
// 点击事件
function deptChange(value) {
    let deptInfo = {}
    let index = deptList.value.findIndex(item => {
        return item.wardCode === value
    })
    if (index > -1) {
        deptInfo = deptList.value[index]
    }
    emits("deptChange", deptInfo)
}
</script>
<script lang="ts">
export default {
    name: "deptList"
}
</script>

<style scoped>
.font-css {
    font-weight: bold;
    color: #000000;
}
</style>
